<template>
  <q-dialog v-model="detail"  >
      <OrderDetailPage :part-id="partId" :order-id="orderId"></OrderDetailPage>
  </q-dialog>
  <q-dialog v-model="repairingDetail" >
    <MyBigDialog title="Repairing Detail">
      <FinalCheckForm class="q-pa-md" mode="report" :is-parent="isParent" :serial-no="serialNo" :stock-code="stockCode" :order-id="orderId"></FinalCheckForm>
    </MyBigDialog>
  </q-dialog>
  <ReportPage>
    <q-table
        :columns="createForm.data.columns"
        :rows="createForm.data.rows"
        class="my-table card-radius"
        wrap-cells
        flat
        bordered
        title="Spare Location Report"
        titleClass="page-header"
        :filter="filter"
        :pagination="{ rowsPerPage: 50 }"
        row-key="id"
        no-data-label="No data found."
        no-results-label="The filter didn't uncover any results"
      >
      <template v-slot:top-right>
        <q-card-actions>
          <q-btn
            class="default-btn"
            label="Search"
            no-caps
            @click="searchbtn"
          />
        </q-card-actions>
      </template>
      <template v-slot:top-row="props">
        <q-td>
            <!-- {{ props.cols[0].label }} -->
            <q-input borderless :label="props.cols[0].label" dense v-model="query.stock_code" filled>
                <template v-slot:default>
                    <q-icon name="search" />
                </template>
            </q-input>
        </q-td>
        <q-td>
            <q-input borderless :label="props.cols[1].label" dense v-model="query.serial_no" filled>
                <template v-slot:default>
                    <q-icon name="search" />
                </template>
            </q-input>
        </q-td>
        <q-td>
            <q-input borderless :label="props.cols[2].label" dense v-model="query.system" filled>
                <template v-slot:default>
                    <q-icon name="search" />
                </template>
            </q-input>
        </q-td>
        <q-td>
            <q-input borderless :label="props.cols[3].label" dense v-model="query.work_group" filled>
                <template v-slot:default>
                    <q-icon name="search" />
                </template>
            </q-input>
        </q-td>

        <q-td>
            <q-input borderless :label="props.cols[4].label" dense v-model="query.location"
                filled>
                <template v-slot:default>
                    <q-icon name="search" />
                </template>
            </q-input>
        </q-td>
    </template>
      </q-table>
  </ReportPage>
  <q-dialog  class="Search"  v-model="searchdig">
        <q-card>
        <q-toolbar class="popup-header">
            <q-toolbar-title  class="q-ma-md cap">
                Search
            </q-toolbar-title>
            <q-space />
                <q-btn
                icon="close"
                size="lg"
                flat
                round
                dense
                v-close-popup
                />
            </q-toolbar>
            <q-card-section class="q-gutter-y-sm row">
                
                <q-item-label class="col-4 fal">Stock Code:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.stock_code"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">Serial No.:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.serial_no"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">System:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.system"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">Workgroup:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.work_group"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">Location:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.location"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <div style="width: 100%;display: flex; justify-content: center;align-items: center;">
                    <q-btn class="default-btn" style="height: 32px;" @click="getreportlist">Sumbit</q-btn>
                </div>
            </q-card-section>
        </q-card>
    </q-dialog>
</template>

<script setup lang="ts">
import ReportPage from 'src/pages/ReportPage.vue';
import { HistoryReport, HistorySearch, RepairOrderHistory } from 'src/services/type';
import { computed, ref ,reactive,onMounted,watch} from 'vue';
import { QTableColumn, useQuasar } from 'quasar';
import { exportTable } from 'src/utils/exportCsvUtils';
import { OutgoingRecord, splorp } from 'src/services/type';
import { repairOrderHistory } from 'src/services/reportService';
import { formatDateTimeString } from 'src/utils/dateUtils';
import { useRouter } from 'vue-router';
// import ObsolescenceTip from '../ObsolescenceTip.vue';
import { getlist } from 'src/services/SpareLocationReport';
const header = ref('History');
const filter = ref('');
const createForm = reactive<{
  data: splorp;
}>({
  data: {
    system: '',
    stock_code: '',
    serial_no: '',
    work_group: '',
    rows: [],
    columns: [
      {
        name: 'stock_code',
        label: 'Stock Code',
        field: 'stock_code',
        align: 'center',
        sortable: true,
      },
      {
        name: 'serial_no',
        label: 'Serial No',
        field: 'serial_no',
        align: 'center',
        sortable: true,
      },
      { name: 'system', label: 'System',sortable: true, field: 'system', align: 'center' },
      {
        name: 'work_group',
        label: 'Workgroup',
        field: 'work_group',
        sortable: true,
        align: 'center',
      },
      {
        name: 'location',
        label: 'Location',
        field: 'location',
        sortable: true,
        align: 'center',
      },
    ],
    location:''
  },
});
const align = 'left'
const query=ref({
    system: '',
    stock_code: '',
    serial_no: '',
    work_group: '',
    location:''
})
const searchdig=ref(false)
watch(query.value, () => {
    // 调用筛选函数
    resportlist();
});
onMounted(() => {
  getreportlist();
});
async function searchbtn() {
  // getreportlist();
  createForm.data.system=''
  createForm.data.stock_code=''
  createForm.data.serial_no=''
  createForm.data.work_group=''
  createForm.data.location=''
  searchdig.value=true
}
const list=ref<Array<splorp>>([])
async function getreportlist() {
  const res = await getlist(
    createForm.data.system,
    createForm.data.stock_code,
    createForm.data.serial_no,
    createForm.data.work_group,
    createForm.data.location
  );
  createForm.data.rows = res.data.data;
  list.value=res.data.data
}
async function resportlist() {
  createForm.data.rows = list.value.filter(item => {
    const conditionCheck =
        item.system.includes(query.value.system) &&
        item.stock_code.includes(query.value.stock_code) &&
        item.serial_no.includes(query.value.serial_no) &&
        item.work_group.includes(query.value.work_group) &&
        item.location.includes(query.value.location);

        console.log('Condition Check:', conditionCheck);
        return conditionCheck;
    })
}
const $q = useQuasar();

/* const = ref() */
const orderId = ref(0)
const partId = ref(0)
const serialNo = ref('')
const stockCode = ref('')
const isParent = ref(false)

const searchDig = ref(false)

const detail = ref(false)
const repairingDetail = ref(false)

const rows = ref<RepairOrderHistory[]>()

async function search(form: { data: HistorySearch}){
  showLoading()
  const res =  await repairOrderHistory(form.data)
  console.log(res);
  rows.value = res
  searchDig.value = false
  $q.loading.hide()
}


function showLoading() {
  $q.loading.show({
    message: 'Doing something. Please wait...',
    boxClass: 'bg-grey-2 text-grey-9',
    spinnerColor: 'primary',
  });
}

function openOrderDetail(order_id: number, part_id:number){
  detail.value = true
  orderId.value =order_id
  partId.value =part_id
}

function openRepairingDetail(order_id: number, stock_code: string, serial_no: string, is_parent: boolean){
  repairingDetail.value = true
  orderId.value = order_id
  stockCode.value = stock_code
  serialNo.value = serial_no
  isParent.value = is_parent
  
}

const router = useRouter();

function onRowClick(evt: any, row: any) {
  router.push(`/maintenance/order/${row.id}`);

}

const colsFilter = ref<typeof ColsFilter>();

function filterFn(row: RepairOrderHistory) {
  if (colsFilter.value) {
    return colsFilter.value.filterFn(row);
  }
}

const filterRows = computed(() => {
  return rows.value?.filter(filterFn);
});

// function dblclickFn(evt: any, row: RepairOrderHistory, index: number) {
//   id.value = row.id ;
//   part_id.value = row.part_id ;
//   detail.value = true;
// }
</script>

<style scoped></style>
